Vuetify is a popular UI framework for Vue apps.
In this article, we’ll look at how to work with the Vuetify framework.
Date Picker’s Elevation
We can set the date picker’s elevation with the flat and elevation props.
To use the flat prop, we can write:
<template>
<v-row justify="space-around">
<v-date-picker v-model="date" flat></v-date-picker>
</v-row>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
date: new Date().toISOString().substr(0, 10),
}),
};
</script>
to make it flat.
And we can write:
<template>
<v-row justify="space-around">
<v-date-picker v-model="date" elevation="15"></v-date-picker>
</v-row>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
date: new Date().toISOString().substr(0, 10),
}),
};
</script>
to add a shadow below the date picker.
Date Pickers — React to Displayed Month/Year Change
We can watch the v-model value with our own watcher.
For instance, we can write:
<template>
<v-row>
<v-col cols="12" sm="6" class="my-2 px-1">
<v-date-picker ref="picker" v-model="date" :picker-date.sync="pickerDate" full-width></v-date-picker>
</v-col>
<v-col cols="12" sm="6" class="my-2 px-1">
<div class="title">Month ({{ date || 'change month...' }})</div>
<ul class="ma-4">
<li v-for="note in notes" :key="note">{{ note }}</li>
</ul>
</v-col>
</v-row>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
date: new Date().toISOString().substr(0, 10),
pickerDate: null,
notes: [],
allNotes: ["foo", "bar", "baz"],
}),
watch: {
pickerDate(val) {
this.notes = [
this.allNotes[Math.floor(Math.random() * 3)],
this.allNotes[Math.floor(Math.random() * 3)],
];
},
},
};
</script>
The picker-date prop has the picked month value.
Then we can watch the pickerDate value and do what we want as the month value changes.
Date Pickers Internationalization
The Vuetify date picker supports internationalization.
For example, we can write:
<template>
<v-row justify="space-around">
<v-date-picker v-model="date" :first-day-of-week="0" locale="zh-cn"></v-date-picker>
</v-row>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
date: new Date().toISOString().substr(0, 10),
}),
};
</script>
We have the locales with the locale of the date picker.
The first-day-of-week prop sets the first day of the week to the day we want.
0 is Sunday and it goes up to 6 for Saturday.
Date Picker Icons
We can set the date picker icon to what we want.
For example, we can write:
<template>
<v-row justify="space-around">
<v-date-picker
v-model="date"
year-icon="mdi-calendar-blank"
prev-icon="mdi-skip-previous"
next-icon="mdi-skip-next"
></v-date-picker>
</v-row>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
date: new Date().toISOString().substr(0, 10),
}),
};
</script>
We change the year-icon , prev-icon , and next-icon let us change the year and navigation icons respectively.
Read Only Date Pickers
We can make the date picker read-only with the readonly prop:
<template>
<v-row justify="center">
<v-date-picker v-model="date" readonly></v-date-picker>
</v-row>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
date: new Date().toISOString().substr(0, 10),
}),
};
</script>
Now we can’t pick anything from the date picker.
Conclusion
We can customize date pickers the way we want with Vuetify.
